<template>
  <div class="index">
    <!--****** 音频 *****-->
    <div class="byd_video">
      <div class="video">
        <video
          id="video"
          width="100%"
          height="calc(100vh)"
          style="background-color: #545c64"
          src="../../public/video/4.mp4"
          preload="auto"
          autoplay
          loop
          muted
        ></video>
      </div>
    </div>

    <!--****** 轮播图 *****-->
    <div class="thumb-example">
      <!-- swiper1 -->
      <swiper
        class="swiper gallery-top"
        :options="swiperOptionTop"
        ref="swiperTop"
        v-if="data"
      >
        <swiper-slide>
          <router-link to="/details">
            <img
              style="width: 60%; margin-top: 30px"
              :src="`${data.data[0].ipic}`"
              alt=""
          /></router-link>
        </swiper-slide>
        <swiper-slide>
          <router-link to="/details">
            <img
              style="width: 60%; margin-top: 30px"
              :src="`${data.data[1].ipic}`"
              alt="" /></router-link
        ></swiper-slide>
        <swiper-slide>
          <router-link to="/details">
            <img
              style="width: 60%; margin-top: 30px"
              :src="`${data.data[2].ipic}`"
              alt="" /></router-link
        ></swiper-slide>
        <swiper-slide
          ><router-link to="/details">
            <img
              style="width: 60%; margin-top: 30px"
              :src="`${data.data[3].ipic}`"
              alt="" /></router-link
        ></swiper-slide>
      </swiper>
      <!-- swiper2 Thumbs -->
      <swiper
        class="swiper gallery-thumbs"
        style="margin-bottom: 30px"
        :options="swiperOptionThumbs"
        ref="swiperThumbs"
      >
        <swiper-slide class="slide-1">
          <p style="color: white; font-size: 30px">海洋爆款</p>
          <p style="color: white; font-size: 22px; padding: 10px 0">
            全新款电轿跑
          </p>
        </swiper-slide>
        <swiper-slide class="slide-2">
          <p style="color: white; font-size: 30px">汉EV创世版</p>
          <p style="color: white; font-size: 22px; padding: 10px 0">
            引领 纯电新轿车
          </p>
        </swiper-slide>
        <swiper-slide class="slide-3">
          <p style="color: white; font-size: 30px">2022款唐EV</p>
          <p style="color: white; font-size: 22px; padding: 10px 0">
            引领 纯电SUV
          </p>
        </swiper-slide>
        <swiper-slide class="slide-4">
          <p style="color: white; font-size: 30px">秦PLUS DM</p>
          <p style="color: white; font-size: 22px; padding: 10px 0">
            燃油轿车颠覆者
          </p>
        </swiper-slide>
      </swiper>
    </div>

    <div class="container">
      <div class="byd_main">
        <!--****** 详情参数 *****-->
        <div class="byd_pic">
          <h1>海豹亮点设计</h1>
          <div class="card">
            <div>
              <h2>豹点设计</h2>
              <ul>
                <li>
                  <router-link to="/details">
                    <img src="../../public/pic/card/1.jpg" alt=""
                  /></router-link>
                  <p>灵动线条 轻盈优雅</p>
                </li>
                <li>
                  <router-link to="/details"><img src="../../public/pic/card/2.jpg" alt="" /></router-link>
                  
                  <p>极简轮廓 引动低趴</p>
                </li>
              </ul>
            </div>

            <div>
              <h2>豹起实力</h2>
              <ul>
                <li>
                  <router-link to="/details"><img src="../../public/pic/card/3.jpg" alt="" /></router-link>
                  <p>CTB电池车身一体化技术</p>
                </li>
                <li>
                 <router-link to="/details"><img src="../../public/pic/card/4.jpg" alt="" /></router-link>
                  <p>类蜂窝三明治结构刀片电池</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="card">
            <div>
              <h2>豹走性能</h2>
              <ul>
                <li>
                  <router-link to="/details"><img src="../../public/pic/card/5.jpg" alt="" /></router-link>
                  <p>后驱/四驱动力结构</p>
                </li>
                <li>
                  <router-link to="/details"><img src="../../public/pic/card/6.jpg" alt="" /></router-link>
                  <p>前双叉臂 后五连杆底盘悬挂</p>
                </li>
              </ul>
            </div>

            <div>
              <h2>豹发科技</h2>
              <ul>
                <li>
                  <router-link to="/details"><img src="../../public/pic/card/7.jpg" alt="" /></router-link>
                  <p>0.219超低风阻系数</p>
                </li>
                <li>
                  <router-link to="/details"><img src="../../public/pic/card/8.jpg" alt="" /></router-link>
                  <p>Dilink智能网联</p>
                </li>
              </ul>
            </div>
          </div>
          <p class="p">* 以上功能部分车配置享有,详情请咨询当地比亚迪经销商</p>
        </div>

        <!--****** 右下角固定导航 *****-->
        <div class="byd_fixed" v-show="leftMenuVisible">
          <ul>
            <router-link to="/bydlocation">
              <li class="guding">
                <img src="../../public/pic/fixed/2.png" alt="" />
                <p>预约试驾</p>
              </li>
            </router-link>
            <router-link to="/compare">
              <li class="guding">
                <img
                  style="padding: 5px 0"
                  src="../../public/pic/fixed/7.png"
                  alt=""
                />
                <p>车辆对比</p>
              </li>
            </router-link>

            <li class="guding fuwu">
              <img src="../../public/pic/fixed/1.png" alt="" />
              <p>服务支持</p>
            </li>
            <div class="serve">
              <div>
                <img src="../assets/kefu.jpg" alt="" />
                <p>
                  <span style="font-weight: 600">全国服务热线</span>
                  <span>400-8088-8888</span>
                </p>
              </div>
              <div>
                <img src="../assets/经销.png" alt="" />
                <p>
                  <span style="font-weight: 600">经销商查询</span>
                  <span>400-8080-8080</span>
                </p>
              </div>
              <div>
                <img src="../assets/投诉.png" alt="" />
                <p>
                  <span style="font-weight: 600">服务投诉热线</span>
                  <span>400-8000-8000</span>
                </p>
              </div>
            </div>
            <a href="#top">
              <li class="guding">
                <i class="el-icon-top byd_icon"></i>
                <p>回到顶部</p>
              </li>
            </a>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  name: "swiper-example-thumbs-gallery",
  title: "Thumbs gallery with Two-way control",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      data: "",
      leftMenuVisible: false,
      controls: false,
      // 轮播
      swiperOptionTop: {
        loop: true,
        loopedSlides: 5,
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 5,
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true,
      },
    };
  },
  mounted() {
    this.getSwiper();
  },
  created() {
    // 给窗口绑定滚动监听事件
    window.addEventListener("scroll", this.windowScrollListener);
  },

  destroyed() {
    this.windowScrollListener("scroll", this.windowScrollListener);
  },
  methods: {
    // 轮播
    getSwiper() {
      let url = "http://8.136.106.157:8888/swiper";

      this.axios.get(url).then((res) => {
        this.data = res.data;
        this.$nextTick(() => {
          const swiperTop = this.$refs.swiperTop.$swiper;
          const swiperThumbs = this.$refs.swiperThumbs.$swiper;
          swiperTop.controller.control = swiperThumbs;
          swiperThumbs.controller.control = swiperTop;
        });
      });
    },

    // 回到顶部
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor((-that.scrollTop * 4) / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },

    // 滚动
    // 窗口滚动监听事件
    windowScrollListener() {
      // 获取滚动条的高度
      var scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop >= 600) {
        // 利用布尔值控制元素的显隐
        this.leftMenuVisible = true;
      }
      if (scrollTop < 600) {
        this.leftMenuVisible = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/* ***轮播图**** */
.thumb-example {
  width: 100%;
  height: 100vh;
  border-radius: 0.1rem;
  background-image: url("../../public/pic/param/2.png");
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
}

.swiper-slide {
  background-position: center;
}

.slide-1 img {
  width: 200px;
  vertical-align: middle;
}
.gallery-top {
  height: 80%;
  width: 100%;
}
.gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 0;
}
.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}



.fuwu:hover + .serve {
  display: block;
}
.serve {
  display: none;
  border-radius: 5px;
  box-shadow: 0 0 5px #545c64;
  width: 170px;
  height: 220px;
  position: absolute;
  left: -180px;
  bottom: 20px;
  background: white;
  box-sizing: border-box;

  div {
    border-radius: 10px 10px 0 0;
    margin: 0;
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    text-align: left;
    padding: 10px;
    display: flex;

    img {
      width: 60px;
      height: 60px;
    }
    p {
      width: 100%;
      text-align: center;
      display: block;
      font-size: 12px;
      padding-top: 12px;

      span {
        display: block;
        padding: 2px 0;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@import url("../styles/index.css");
</style>
